<template>
	<view class="container">
		<view class="content">
			<uni-forms ref="valiForm" :rules="rules" validateTrigger='blur' label-position="top"
				:modelValue="valiFormData" label-width="100%">
				<uni-forms-item label="您对我公司服务人员的服务态度是否满意?" required name="evaluate1">
					<uni-data-checkbox v-model="valiFormData.evaluate1" :localdata="evaluateList" />
				</uni-forms-item>
				<uni-forms-item label="您对我公司服务人员的技术水平是否满意?" required name="evaluate2">
					<uni-data-checkbox v-model="valiFormData.evaluate2" :localdata="evaluateList" />
				</uni-forms-item>
				<uni-forms-item label="您对我公司产品运行情况是否满意?" required name="evaluate3">
					<uni-data-checkbox v-model="valiFormData.evaluate3" :localdata="evaluateList" />
				</uni-forms-item>
				<uni-forms-item label="您对我公司产品质量是否满意?" required name="evaluate4">
					<uni-data-checkbox v-model="valiFormData.evaluate4" :localdata="evaluateList" />
				</uni-forms-item>
				<uni-forms-item label="您认为本公司的服务需要改进的地方:" name="suggestion">
					<uni-easyinput type="textarea" v-model="valiFormData.suggestion" placeholder="您认为本公司的服务需要改进的地方" />
				</uni-forms-item>
			</uni-forms>
			<button type="primary" @click="submit('valiForm')" :disabled="submitDisabled">提交</button>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '登录适配',
				list: {},
				valiFormData: {
					evaluate1: '',
					evaluate2: '',
					evaluate3: '',
					evaluate4: '',
					id: 0,
					suggestion: '',
				},
				evaluateList: [{
					text: '非常满意',
					value: 1
				}, {
					text: '满意',
					value: 2
				}, {
					text: '一般',
					value: 3
				}, {
					text: '不满意',
					value: 4
				}, {
					text: '非常不满意',
					value: 5
				}],
				submitDisabled: false,
				// 校验规则
				rules: {
					evaluate1: {
						rules: [{
							required: true,
							errorMessage: '请选择',
						}]
					},
					evaluate2: {
						rules: [{
							required: true,
							errorMessage: '请选择',
						}]
					},
					evaluate3: {
						rules: [{
							required: true,
							errorMessage: '请选择',
						}]
					},
					evaluate4: {
						rules: [{
							required: true,
							errorMessage: '请选择',
						}]
					},

				},
			}
		},
		created() {
			this.getList()

		},
		methods: {
			getList() {
				console.log(this.$store.getters.productId)
				this.request({
					'url': '/wx/project/info/' + this.$store.getters.productId,
					'method': 'get',
				}).then(res => {
					console.log(res)
					if (res && res.code == 200) {
						this.list = res.info
					}
				}).catch(err => {

				})
				this.request({
					'url': '/wx/project/evaluate/info/' + this.$store.getters.productId,
					'method': 'get',
				}).then(res => {
					console.log(res)
					if (res && res.code == 200) {
						// this.list = res.info
						console.log(res)
						this.valiFormData.evaluate1 = res.info.evaluate1
						this.valiFormData.evaluate2 = res.info.evaluate2
						this.valiFormData.evaluate3 = res.info.evaluate3
						this.valiFormData.evaluate4 = res.info.evaluate4
						this.valiFormData.id = res.info.id
						this.valiFormData.suggestion = res.info.suggestion

					}
				}).catch(err => {

				})
			},
			submit(ref) {
				this.$refs[ref].validate().then(res => {
					console.log('success', res);

					this.request({
						'url': '/wx/project/evaluate/save',
						'method': 'post',
						'data': {
							evaluate1: res.evaluate1,
							evaluate2: res.evaluate2,
							evaluate3: res.evaluate3,
							projectId: this.list.id,
							evaluate4: res.evaluate4,
							suggestion: res.suggestion,
							id: this.valiFormData.id ? this.valiFormData.id : null
						}
					}).then(res => {
						console.log(res)
						if (res && res.code == 200) {
							// this.list = res.info
							// this.valiFormData.productModel = res.info.model
							uni.showToast({
								title: '评价成功'
							})
							setTimeout(() => {
								uni.navigateBack()
								this.submitDisabled = false
							}, 1500)
						}
					}).catch(err => {
						this.submitDisabled = false
					})
				}).catch(err => {
					console.log('err', err);
				})
			}

		}
	}
</script>

<style>
	.container {
		padding: 15px;
	}

	.content {
		background-color: #fff;
		border-radius: 10px;
		padding: 15px;
		box-shadow: 0px 0px 10px #e2dede;
	}

	.uni-list-item__content,
	.slot-text {
		min-width: 80px;
	}

	.content .uni-list-item__content-title {
		color: #999;

	}

	.content .uni-list-item__extra-text {
		color: #3b4144;
		/* font-size: 14px; */
		text-align: right;
	}
</style>